<template>
	<view class="m-card">
		<view class="_card_number" v-for="(nav,index) in cardList" :key="index">
			<image  @tap="tapSelect(index)"  :src="select == index ? nav.activeCard:nav.defaultCard" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:'m-card',
		props:{
			cardList:{
				type:Array,
				default:()=>{
					return [
						{
							defaultCard:'../../static/img/card_def_one.png',
							activeCard:'../../static/img/card_act_one.png'
						},{
							defaultCard:'../../static/img/card_def_two.png',
							activeCard:'../../static/img/card_act_two.png'
						},{
							defaultCard:'../../static/img/card_def_three.png',
							activeCard:'../../static/img/card_act_three.png'
						},{
							defaultCard:'../../static/img/card_def_four.png',
							activeCard:'../../static/img/card_act_four.png'
						},{
							defaultCard:'../../static/img/card_def_five.png',
							activeCard:'../../static/img/card_act_five.png'
						}
					]
				}
			},
			current:{
				type:Number,
				default:-1
			},
			card:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				select:this.current
			};
		},
		methods:{
			tapSelect(index){
				this.select = index
				this.$emit("click", {
				  "item": this.cardList[index],
				  "select": this.select
				});
			}
		}
	}
</script>

<style lang="scss">
	.m-card{
		height:565upx;
		width:97%;
		margin: auto;
		margin-top:100%;
		position:relative;
		text-align:center;
		justify-content:center;
		align-items:center;
		overflow-y:scroll;
		
		._card_number{
			width:185upx;
			height:225upx;
			margin-top:35upx;
			display:inline-block;

			
			image{
				width: 94%;
				height: 100%;
			}
		}
	}
</style>
